<template>
	<view class="discount-grade">
		<!-- #ifdef MP-ALIPAY -->
		<button type="default" scope="userInfo" open-type="getAuthorize" @getAuthorize="toGetCoupon"  class="discount detail-nav-bar" v-if="couponList.length > 0" :class="{borderBottomNone:!borderBottom,borderTop:borderTop}">
			<view class="left">
				<view class="item">
					<template v-for="(item,index) in couponList">
						<view v-if="index <= 2" :key="index"><text class="point" v-if="index>0">•</text>{{item.name}}</view>
					</template>
					
				</view>
			</view>
			<view class="right">领券<text class="icon-right iconfont">&#xe67f;</text></view>
		</button>
		<!-- #endif -->
		
		<!-- #ifdef MP-TOUTIAO || H5 -->
		<button type="default" open-type="getUserInfo" @click="toGetCoupon"  class="discount " v-if="couponList.length > 0" :class="{borderBottomNone:!borderBottom,borderTop:borderTop}">
			<view class="detail-nav-bar">
				<view class="left">
					<view class="item">
						<template v-for="(item,index) in couponList">
							<view v-if="index <= 2" :key="index"><text class="point" v-if="index>0">•</text>{{item.name}}</view>
						</template>
						
					</view>
				</view>
				<view class="right">领券<text class="icon-right iconfont">&#xe67f;</text></view>
			</view>
		</button>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<button type="default"  @click="toGetCoupon"  class="discount detail-nav-bar" v-if="couponList.length > 0" :class="{borderBottomNone:!borderBottom,borderTop:borderTop}">
			<view class="left">
				<view class="item">
					<template v-for="(item,index) in couponList">
						<view v-if="index <= 2" :key="index"><text class="point" v-if="index>0">•</text>{{item.name}}</view>
					</template>
					
				</view>
			</view>
			<view class="right">领券<text class="icon-right iconfont">&#xe67f;</text></view>
		</button>
		<!-- #endif -->
		
	</view>
</template>

<script>
	/**
	 * 优惠券
	 */
	export default {
		name:'stProductCoupon',
		props:{
			typeid: {
				type: [Number, String],
				default: ''
			},
			productid:{
				type: [Number, String],
				default: ''
			},
			borderBottom: {
				type: Boolean,
				default: false
			},
			borderTop: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				couponList:[]
			};
		},
		mounted() {
			//this.getCouponInfo();
		},
		methods:{
			// 获取优惠券信息
			async getCouponInfo(){
				let params = {
					method:'api/v2/coupon/get_coupon_list',
					type_id:this.typeid,
					product_id: this.productid,
					develop: true,
				};
				let res = await this.$http(params);
				console.log(res)
				if(res.status)
				{
					this.couponList = res.data.list ? res.data.list : [];
				}
			},
			// 前往领券页面
			async toGetCoupon()
			{
				this.$emit('toGetCoupon');
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.detail-nav-bar {
		@extend .justifyspacec;
			
		.icon-right {
			color: #FF4A50;
			font-size: 28rpx;
			font-weight: bold
		}
	
		.left {
			@extend .alignJustify;
		}
	
		.right {
			@extend .alignItems;
			font-size: 22rpx;
		}
	}
	
	.borderTop{
		border-top: 1rpx solid $uni-border-color;
	}
	
	.discount-grade {
		position: relative;
		overflow: hidden;
		margin-bottom: 20rpx;
		background-color: #FDF7F7;
		border-radius: 14rpx;
		font-size: 22rpx;
		&>view {
			border-bottom: 1rpx solid $uni-border-color;
			&.borderBottomNone{
				border-bottom: none;
			}
		}
	
		.discount,
		.grade {
			height: 60rpx !important;
			line-height: 60rpx !important;
		}
	
		.discount {
			overflow: hidden;
			background-color: transparent!important;
			padding: 0 20rpx 0 16rpx;
	
			.item {
				&>view {
					position: relative;
					height: 34rpx;
					line-height: 34rpx;
					padding: 0 4rpx;
					color: #FF4A50;
					font-size: 22rpx;
	
					&:first-child{
						margin-left: 0;
					}
					.point{
						padding-right: 8rpx;
					}
				}
			}
		}
	
		.right {
			color: #FF4A50;
		}
	
		.item {
			@extend .displayflex;
			flex-wrap:wrap;
			max-width: 540rpx;
			height: 34rpx;
			overflow: hidden;
		}
	}
</style>
